<template>
  <div class="home">
    <div class="wrapper">
      <div class="header">
        <el-form :inline="true" size="small" label-width="84px">
          <el-form-item label="组织机构：">
            <el-select v-model="params.name" placeholder="请选择">
              <el-option
                v-for="item in organizations"
                :key="item.value"
                :label="item.name"
                :value="item.spaceID"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="线别：">
            <el-select v-model="params.spaceId" placeholder="请选择" >
              <el-option
                v-for="item in lines"
                :key="item.spaceID"
                :label="item.name"
                :value="item.spaceID"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="高温炉：">
            <el-select v-model="params.furnace" placeholder="请选择">
              <el-option
                v-for="item in furnaces"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="params.status" placeholder="请选择">
              <el-option
                v-for="item in statuses"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
            <el-button size="mini">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <data-card v-for="(item, index) in dataList" :key="index" :spaces="spaces" :item="item"/>
    </div>
  </div>
</template>

<script>
import DataCard from './components/DataCard.vue'
import { getSpaces } from "@/api/space";

export default {
  name: 'Main',
  components: {
    DataCard
  },
  data() {
    return {
      organizations: [],
      furnaces: [],
      statuses: [],
      params: {
        name: '',
        spaceId: '',
        modeId: '',
        page: 0,
        size: 1000,
        furnace: '',
        status: '',
      },
      spaces: []
    }
  },
  watch: {},
  created() {
    getSpaces({
        page: 0,
        size: 0,
      }).then((res) => {
        if (res.data instanceof Array) {
          res.data.forEach(e => {
            this.spaces.push({ key: e.spaceID, label: e.name });
          });
        }
      });
  },
  computed: {
    lines() {
      return this.$store.state.home.SpaceList;
    },
    dataList() {
      return this.$store.state.home.homeDataList;
    }
  },
  mounted() {
    this.loadSpace();
  },
  destroyed() {},
  methods: {
    // 获取空间
    async loadSpace() {
      await this.$store.dispatch('home/Space');
      //this.params.spaceId = this.$store.state.home.SpaceList[0].spaceID;
      this.loadEquipment();
    },
    // 获取设备
    async loadEquipment() {
      await this.$store.dispatch('home/Equipment', this.params)
    },
    // 查询
    search() {
      this.loadEquipment();
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 30px;
}
</style>
